<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ifature</title>
  <!-- Ionicons -->
  <link href="resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
  <!-- Theme style -->
  <link href="resources/css/fature-web.css" rel="stylesheet" type="text/css" />
  <!-- BOOTSTRAP STYLES-->
  <link href="resources/css/bootstrap.css" rel="stylesheet" />
  <!-- FONTAWESOME STYLES-->
  <link href="resources/css/font-awesome.css" rel="stylesheet" />
  <!-- CUSTOM STYLES-->
  <link href="resources/css/custom.css" rel="stylesheet" />

  <!-- JQUERY SCRIPTS -->
  <script src="resources/js/jquery-2.1.1.min.js"></script>

  <script type='text/javascript'>
function iframeAutoHeight(){
    //by Micox - elmicox.blogspot.com - elmicox.com - webly.com.br  
    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = $('#paiConteudo').height()
            $('#frmConteudo').height(val_temp + "px");
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = $('#paiConteudo').height()
        $('#frmConteudo').height(val + "px");
    }    
}
</script>

</h:head>
<h:body onload="javascript:iframeAutoHeight(this);" onresize="javascript:iframeAutoHeight(this);">

    <nav class="navbar navbar-default navbar-cls-top" role="navigation" style="top: 0; position: fixed; height: 50px;">

      <div class="navbar-header">
        <a id="menuSistema" title="Menu do sistema" class="navbar-brand2" style="display: block !important;">
          <div>
            <img style="margin-top: 3px;" id="image-1" src="resources/imagens/menu-32-branco.png" />
          </div>
        </a>
      </div>

      <a class="navbar-brand" style="padding-left: 0px;" href="index.xhtml">
        <img style="margin-top: -13px;" src="resources/imagens/logo_ifature.png" />
      </a>


      <div id="navMenuGeral" style="display: none;" class="menu-lateral">

        <ul class="nav" id="main-menu">
          <li>
            <div class="user-panel" style="color: #fff !important; background: none repeat scroll 0 0 #202020 !important;">
              <div class="pull-left image">
                <img src="/ifature/resources/imagens/find_user.png" class="user-image img-responsive" />
              </div>
              <div class="pull-left info">
                <p style="font-family: 'Source Sans Pro', sans-serif; font-size: 1.0em; font-weight: normal;">
                <div>
                  Bem vindo,
                  <h:outputText value="#{configuracaoBean.usuarioLogado}" />
                </div>
                </p>
                <a href="#">
                  <i class="fa fa-circle text-success"></i>
                  Versão: 1.0.1.5
                </a>
              </div>
            </div>

          </li>
          <li>
            <a href="#">
              <i class="fa fa-folder-open-o fa-2x"></i>
              <span class="fa-title">Cadastros</span>
              <span class="fa arrow"></span>
            </a>
            <ul class="nav nav-second-level">
              <li>
                <a href="/ifature/private/perfil/perfil.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Perfil de acesso</a>
              </li>
              <li>
                <a href="/ifature/private/usuario/usuario.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Usuário</a>
              </li>
              <li>
                <a href="/ifature/private/leiturista/leiturista.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Leiturista</a>
              </li>
              <li>
                <a href="/ifature/private/equipamento/equipamento.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Dispositivo móvel</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-sitemap fa-2x"></i>
              <span class="fa-title">Roteiro</span>
              <span class="fa arrow"></span>
            </a>
            <ul class="nav nav-second-level">
              <li>
                <a href="/ifature/private/importacao/importacao.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Importar arquivo SAAE</a>
              </li>
              <li>
                <a href="/ifature/private/roteiro/roteiro.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Divisão</a>
              </li>
              <li>
                <a href="/ifature/private/exportacao/exportacao.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Exportar arquivo SAAE</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="/ifature/private/cadastro/cadastro.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">
              <i class="fa fa-table fa-2x"></i>
              <span class="fa-title">Dados cadastrais</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-edit fa-2x"></i>
              <span class="fa-title">Correção de leitura</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-pie-chart fa-2x"></i>
              <span class="fa-title">Relatórios</span>
              <span class="fa arrow"></span>
            </a>
            <ul class="nav nav-second-level">
            
            <!-- 
              <li>
                <a href="/ifature/private/verIp.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Produtividade</a>
              </li>
            
             <li>
                <a href="#">Contas retidas</a>
              </li>
              <li>
                <a href="#">Verificação de roteiro</a>
              </li>
               -->
              <li>
                <a href="/ifature/private/relatorioOcorrencia/relatorioOcorrencia.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Ocorrências</a>
              </li>
              <li>
                <a href="/ifature/private/relatorioObservacaoCampo/relatorioObservacaoCampo.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Observações campo</a>
              </li>
              <li>
                <a href="/ifature/private/relatorioResumoCampo/relatorioResumoCampo.xhtml" target="frmConteudo" onclick="javascript:chamarMenu(null);">Resumo campo</a>
              </li>
              <!-- 
              <li>
                <a href="#">Leituras X leituras efetuadas</a>
              </li> -->
            </ul>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-cog fa-2x"></i>
              <span class="fa-title">Configurações</span>
            </a>
          </li>
          <li>
            <a href="/ifature/private/monitoramento/monitoramento.xhtml" target="_blank" onclick="javascript:chamarMenu(null);">
              <i class="fa fa-map-marker fa-2x"></i>
              <span class="fa-title">Monitoramento</span>
            </a>
          </li>
        </ul>

      </div>



      <div class="navbar-right" style="float: right;">
        <ul class="nav navbar-nav" style="z-index: 9999;">

          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu" style="position: fixed !important; right: 0 !important; z-index: 9999;">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="glyphicon glyphicon-user"></i>
              <span>
                <h:outputText value="#{configuracaoBean.usuarioLogado}" />
                <i class="caret"></i>
              </span>
            </a>

            <ul class="dropdown-menu" style="position: absolute; z-index: 99999999999;">

              <!-- User image -->
              <li class="user-header bg-light-blue">
                <img src="/ifature/resources/imagens/find_user.png" class="img-circle" alt="User Image" />
                <br />
                <br />
                <h:form>
                  <h:outputText value="#{configuracaoBean.usuarioLogado}" />
                  <br />
                  <small>Cadastrado desde ....</small>
                </h:form>

              </li>

              <!-- Menu Body -->
              <li class="user-body">
                <div class="col-xs-4 text-center">
                  <a href="#">Link 1</a>
                </div>
                <div class="col-xs-4 text-center">
                  <a href="#">Link 2</a>
                </div>
                <div class="col-xs-4 text-center">
                  <a href="#">Link 3</a>
                </div>
              </li>

              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-right">
                  <h:form>
                    <h:commandLink styleClass="btn btn-default btn-flat" value="Sair do sistema" action="#{configuracaoBean.logoff}" />
                    <!-- <a href="#" class="btn btn-default btn-flat">Sair do Sistema</a>  -->
                  </h:form>
                </div>
              </li>
            </ul>
          </li>
        </ul>

      </div>
    </nav>




  <!-- <div id="receberConteudo"></div> -->
  <div id="paiConteudo" style="position: fixed; top: 50px; left: 0; bottom: 80px; right: 0; height: 100%; width: 100%;">

    <iframe id="frmConteudo" name="frmConteudo" style="bottom: 80px;" scrolling="auto" frameborder="0" width="100%" onload="javascript:iframeAutoHeight(this);"
      onresize="javascript:iframeAutoHeight(this);" onchange="javascript:iframeAutoHeight(this);"></iframe>

  </div>

  <footer class="footer">
    <div class="rodape">2014 - Aldivone Correia - (85) 9184-5156 - aldivone@gmail.com</div>
  </footer>



  <!-- BOOTSTRAP SCRIPTS -->
  <script src="resources/js/bootstrap.min.js"></script>
  <!-- METISMENU SCRIPTS -->
  <script src="resources/js/jquery.metisMenu.js"></script>
  <!-- CUSTOM SCRIPTS -->
  <script src="resources/js/custom.js"></script>

  <script type="text/javascript">

		function chamarMenu(pagina){
		  $('#navMenuGeral').hide();
		
		  /*$('#receberConteudo').empty();
		  
		  $('#receberConteudo').load(pagina); */
		} 
		
		$( "#menuSistema" ).click(function() {
		 $('#navMenuGeral').toggle();
		});

	  	$('.menu-lateral').css('height',(parseInt($(window).height()) - (55 + parseInt($(".rodape").height()))) + 'px');
		$(window).resize(function() {
			$('.menu-lateral').css('height',(parseInt($(window).height()) - (55 + parseInt($(".rodape").height()))) + 'px');
		});
	  
	</script>
</h:body>
</html>
